<!DOCTYPE html>
<html lang="zh">
<head>
<title>CodeMirror searchbox Test</title>
<meta charset="UTF-8">
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="../examples/css/style.css" />
</head>
<body>
	<div id="layout">
		<textarea id="test" style="display: none;">###Hello world!</textarea>
	</div>
	<script src="../examples/js/jquery.min.js"></script>
	<link rel="stylesheet" href="../lib/codemirror/codemirror.min.css" />
	<script src="../lib/codemirror/codemirror.min.js"></script>
	<script src="../lib/codemirror/modes.min.js"></script>
	<script src="../lib/codemirror/addons.min.js"></script>
	<script src="js/searchbox.js"></script>
	<style>
html, body, #layout, .CodeMirror {
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-family: Consolas;
	font-size: 13px;
}

.ace_search {
	font-family: "微软雅黑", Arial;
	padding-bottom: 4px;
}

.ace_replacebtn, .ace_button {
	padding: 0 5px;
	font-size: 12px;
}

.ace_button {
	border-radius: 3px;
	padding: 2px 5px;
	margin-left: 3px;
}

.ace_button.checked {
	border-color: #ccc;
	background-color: #fafafa;
}

.ace_search {
	display: inline-block;
	max-width: 320px;
}

.ace_search_form, .ace_replace_form {
	display: inline-block;
	float: none;
}

.ace_search_options {
	display: block;
}
</style>
	<script type="text/javascript">
            $(function() {
                var enableSearchbox = true;
                var codeMirrorConfig = {
                    mode: "gfm",
                    theme: "default",
                    tabSize: 4,
                    dragDrop: false,
                    autofocus: true,
                    indentUnit : 4,
                    searchbox: enableSearchbox,  // IE9+
                    lineNumbers: true,
                    lineWrapping: true,
                    matchBrackets: true,
                    indentWithTabs: true,
                    styleActiveLine: true,
                    styleSelectedText: true,
                    autoCloseBrackets: true,
                    showTrailingSpace: true,
                    highlightSelectionMatches: {
                        showToken: /\w/
                    } 
                }; 

                $.get("../examples/test.md", function(md){
                    $("#test").html(md);
                    
                    var codeMirrorEditor = CodeMirror.fromTextArea($("#test")[0], codeMirrorConfig);
                    var codeMirror = $(".CodeMirror");
                
                    $(window).keydown(function() {
                        if (!enableSearchbox) return false;
                        
                        $(".ace_replacebtn").eq(0).html("替换");
                        $(".ace_replacebtn").eq(1).html("全部替换");                        
                        $(".ace_searchbtn").eq(2).remove();//.html("全部").css({width: "36px", padding :"0 4px"});
                        
                        $(".ace_button").eq(0).html("正则搜索");
                        $(".ace_button").eq(1).html("区分大小写");
                        $(".ace_button").eq(2).html("全词搜索");
                    });
                });
            });
        </script>
</body>
</html>